<template>
  <div class="wrap">
    <div class="doctor-wrap">
      <div class="doctor" v-for="item in doctorList">
        <img :src="item.avatar" alt="">
        <div class="text">
          <p class="username">{{item.username}}</p>
          <p class="brief">{{item.hospital}}</p>
        </div>
        <div class="chat">
          <router-link :to="`/message?id=` + item.id"><Button @click="addConver(item.id)">私信</Button></router-link></div>
      </div>
    </div>
    <div class="detail">
      <div class="header-wrap">
        <div class="header">
          <div
            class="title"
            v-for="(item, index) in titleList"
            @click="scrollTo(item.name, index)"
            :class="index == activeTitle ? 'active' : ''"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="item">
        <p class="item-title" id="overview">概述</p>
        <div class="item-content">
          <v-md-preview :text="diseaseDetail.overview"></v-md-preview>
        </div>
        <p class="item-title" id="etiology">病因</p>
        <div class="item-content">
          <v-md-preview :text="diseaseDetail.etiology"></v-md-preview>
        </div>
        <p class="item-title" id="symptoms">症状</p>
        <div class="item-content">
          <v-md-preview :text="diseaseDetail.symptoms"></v-md-preview>
        </div>
        <p class="item-title" id="medicalTreatment">就医</p>
        <div class="item-content">
          <v-md-preview :text="diseaseDetail.medicalTreatment"></v-md-preview>
        </div>
        <p class="item-title" id="treatment">治疗</p>
        <div class="item-content">
          <v-md-preview :text="diseaseDetail.treatment"></v-md-preview>
        </div>
        <p class="item-title" id="prognosis">预后</p>
        <div class="item-content">
          <v-md-preview :text="diseaseDetail.prognosis"></v-md-preview>
        </div>
        <p class="item-title" id="daily">日常</p>
        <div class="item-content">
          <v-md-preview :text="diseaseDetail.daily"></v-md-preview>
        </div>
        <p class="item-title" id="other">其他</p>
        <div class="item-content">
          <v-md-preview :text="diseaseDetail.other"></v-md-preview>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html';
import { getSession,setSession } from "@/utils/index.js";

export default {
  components:{
    VMdPreviewHtml
  },
  data() {
    return {
      titleList: [
        {
          name: "overview",
          title: "概述",
        },
        {
          name: "etiology",
          title: "病因",
        },
        {
          name: "symptoms",
          title: "症状",
        },
        {
          name: "medicalTreatment",
          title: "就医",
        },
        {
          name: "treatment",
          title: "治疗",
        },
        {
          name: "prognosis",
          title: "预后",
        },
        {
          name: "daily",
          title: "日常",
        },
        {
          name: "other",
          title: "其他",
        },
      ],
      activeTitle: "0",
      diseaseDetail:{},
      doctorList:{}
    };
  },
  created(){
    let {id} = this.$route.query
    this.getDataList(id)
    this.getDoctorList()
  },
  methods: {
    scrollTo(name, index) {
      this.activeTitle = index;
      console.log(name);
      let res = document.getElementById(`${name}`);
      document
        .getElementById(`${name}`)
        .scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "nearest",
        });
        // window.scrollBy(0,100)
      // window.scrollTo(0,300)
    },
    getDataList(id){
      this.HttpService.getDiseaseDetail({id:id}).then(res =>{
        console.log(res)
        this.diseaseDetail = res.data
      })
    },
    getDoctorList(){
      this.HttpService.getAllDoctor().then(res =>{
        console.log(res)
        this.doctorList = res.data
      })
    },
    // 私信
    addConver(receiverId) {
      let { id } = getSession('userInfo')
      this.HttpService.addConversation({ sender: id, receiverId: receiverId }).then(
        (res) => {
          console.log(res);
        }
      );
    },
  },
};
</script>

<style lang='less' scoped>
.wrap {
  .doctor-wrap {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    height: 150px;
    .doctor{
      margin-left: 50px;
      padding-right: 50px;
      display: flex;
      img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 20px;
      }
      .text{
        .username{
          font-size: 18px;
        }
        .brief{
          margin-top: 8px;
          color:rgb(190, 190, 190);
        }
      }
      .chat{
        display: none;
      }
    }
    .doctor:hover{
      .chat{
        display: block;
        color:red;
      }
    }
  }
  .detail {
    background-color: #ffffff;
    margin-top: 15px;
    .header-wrap {
      padding: 10px 30px;
      position: sticky;
      top: 0px;
      background-color: #fff;
      .header {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        position: relative;
        .title {
          line-height: 50px;
          font-size: 20px;
          padding: 0px 15px;
        }
        .active {
          color:var(--theme-color);
          font-weight: bold;
          border-bottom: 3px solid var(--theme-color);
        }
      }
    }
    .item {
      margin: 0 auto;
      width: 93%;
      margin-top: -60px;
      .item-title {
        font-size: 25px;
        color: #000;
        padding-top: 80px;
      }
      .item-content {
        margin-left: -30px;
      }
    }
  }
}
</style>
